<template>
  <div>
    <div class="container">
      <div class="card" v-for="item in studenBaseInfo" :key="item.title">
        <div class="imgBx">
          <el-image :src="item.imgSrc" fit="contain"></el-image>
        </div>
        <div class="contentBx">
          <div class="data">
            <h3>姓名:{{ item.name }}</h3>
            <p>编号：{{ item.recipientId }}</p>
            <p>年龄：{{ item.age }}</p>
            <p>学校：{{ item.school }}</p>
            <p>目标金额：￥{{ item.targetMoney }}</p>
            <p>
              {{ item.txt }}
            </p>
            <span @click="learnDetail(item)">了解更多>></span>
          </div>
        </div>
      </div>
    </div>
    <el-pagination
      @current-change="handleCurrentChange"
      :page-size="paginations.page_size"
      :pager-count="5"
      :layout="paginations.layout"
      :total="learnSectionAndCount.totalCount"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getStudentList } from "network/charity";

export default {
  name: "HopeDiamond",
  props: {
    hopelist: {
      type: Array,
      default() {
        return [];
      }
    },
    learnSectionAndCount: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      paginations: {
        page_index: 1, //当前页
        page_size: 6, //一页显示多少
        layout: "prev, pager, next"
      },
      studenBaseInfo: []
    };
  },
  created() {
    // console.log(this.totalCount);
  },
  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    learnDetail(item) {
      this.$emit("readmore", item);
    },
    handleCurrentChange(currentPage) {
      //这个a代表当前第几页    发送请求的页数就加上它
      const _this = this;
      getStudentList(_this.learnSectionAndCount.type, currentPage).then(res => {
        if (res.length) {
          res.forEach(element => {
            if (!element.status) {
              element.imgSrc = require("assets/image/charity/personDonation/hopeStart/avatar-person-man.jpg");
            } else {
              element.imgSrc = require("assets/image/charity/personDonation/hopeStart/avatar-person.jpg");
            }
          });
          _this.studenBaseInfo = res;
        }
      });
    }
  },

  watch: {
    hopelist() {
      this.studenBaseInfo = this.hopelist;
    }
  }
};
</script>
<style scoped lang="scss">
.container {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

.container .card {
  width: 15vw;
  margin: 20px;
  padding: 35px 15px;
  background: #ebf5fc;
  border-radius: 40px;
  box-shadow: -6px -6px 20px rgba(255, 255, 255, 1),
    6px 6px 20px rgba(0, 0, 0, 0.1);
}

.container .card:hover {
  box-shadow: inset -6px -6px 10px rgba(255, 255, 255, 0.5),
    inset 6px 6px 20px rgba(0, 0, 0, 0.05);
}

.container .card .imgBx {
  position: relative;
  // text-align: center;
}

.container .card .imgBx img {
  max-width: 10vw;
}

.container .card .contentBx {
  position: relative;
  margin-top: 20px;
  .data {
    margin-left: 20%;
    text-align: justify;
  }
}

.container .card .contentBx h3 {
  color: #32a3b1;
  // font-weight: 700;
  font-size: 1.1em;
  letter-spacing: 2px;
}

.container .card .contentBx p {
  color: #32a3b1;
  // float: left;
}

.container .card .contentBx span {
  display: inline-block;
  padding: 10px 20px;
  margin-top: 15px;
  border-radius: 40px;
  color: #32a3b1;
  font-size: 16px;
  box-shadow: -4px -4px 15px rgba(255, 255, 255, 1),
    4px 4px 15px rgba(0, 0, 0, 0.1);
}

.container .card .contentBx span:hover {
  cursor: pointer;
  box-shadow: inset -4px -4px 10px rgba(255, 255, 255, 0.5),
    inset 4px 4px 10px rgba(0, 0, 0, 0.1);
}

.container .card .contentBx span:hover span {
  display: block;
  transform: scale(0.98);
}

.container .card:hover .imgBx,
.container .card:hover .contentBx {
  transform: scale(0.98);
}
</style>
